<template>
  <div class="app-container">
    <el-card>
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="题目" name="problem" lazy>
          <contest-problem :key="timer1" :contest-id="contestId" />
        </el-tab-pane>
        <el-tab-pane label="提交" name="status" lazy>
          <contest-status :key="timer2" :contest-id="contestId" />
        </el-tab-pane>
        <el-tab-pane label="排名" name="rank" lazy>
          <contest-rank :key="timer3" :contest-id="contestId" />
        </el-tab-pane>
        <el-tab-pane label="答疑" name="clarification" lazy>
          <contest-clarification :key="timer4" :contest-id="contestId" />
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
import ContestProblem from '@/views/contest/components/ContestProblem'
import ContestStatus from '@/views/contest/components/ContestStatus'
import ContestRank from '@/views/contest/components/ContestRank'
import ContestClarification from '@/views/contest/components/ContestClarification'
import { validateContestUser } from '@/api/contest'
import { getUserId } from '@/utils/auth'

export default {
  components: { ContestProblem, ContestStatus, ContestRank, ContestClarification },

  data() {
    return {
      contestId: -1,
      activeName: 'problem',
      timer1: '',
      timer2: '',
      timer3: '',
      timer4: ''
    }
  },
  created() {
    if (this.$route.query.contestId === undefined) {
      this.$message.warning('出错了，请稍后再试')
      this.$router.back()
    } else {
      this.contestId = this.$route.query.contestId
      validateContestUser({
        contestId: this.contestId, userId: getUserId() }).then(() => {})
        .catch(err => {
          if (err.code === 'A0404') {
            this.$router.back()
          }
        })
    }
  },
  methods: {
    handleClick(tab, event) {
      if (tab.name === 'problem') {
        this.timer1 = new Date().getTime()
      } else if (tab.name === 'status') {
        this.timer2 = new Date().getTime()
      } else if (tab.name === 'rank') {
        this.timer3 = new Date().getTime()
      } else if (tab.name === 'clarification') {
        this.timer4 = new Date().getTime()
      }
    }
  }

}
</script>

<style scoped>

</style>
